<template>
  <div>
    <!-- 精品歌单推荐区 -->
    <Quality :playlists="playlists"></Quality>
    <Skeleton :myType="'list'" :loading="loading">
      <!-- 歌单分类区 -->
      <Cate></Cate>
    </Skeleton>
  </div>
</template>

<script>
import { reqHighQuality } from '@/api/songMenu'

import Quality from './children/Quality.vue'
import Cate from './children/Cate.vue'
import Skeleton from '@/components/Skeleton.vue'
export default {
  data() {
    return {
      playlists: [],
      loading: true
    }
  },
  components: {
    Quality,
    Cate,
    Skeleton
  },
  async created() {
    const { data: playlists } = await reqHighQuality()
    this.playlists = playlists.playlists
    this.loading = false
  },
  methods: {}
}
</script>

<style lang="less" scoped></style>
